<template>
  <view>
    <!-- 顶部标题 -->
    <view class="headBack">
      <image src="../../static/37.png" lazy-load />
      <view class="title">
        <image src="../../static/return.png" lazy-load @click="goBack" />
        <view>体验课</view>
      </view>
    </view>
    <!-- 添加体验课 -->
    <view>
      <view class="add_trial_list">
        <image src="../../static/tianjia.png" lazy-load />
        <view>添加体验课</view>
        <picker class="pickers" @change="bindPickerChange" :value="array[index].id" :range="array" range-key="name">
          <view style="width: 100%; height: 100rpx;"></view>
        </picker>
      </view>
    </view>
    <template v-if="datas.length">
      <view v-for="(item, index) in datas" :key="index" @click="jump" :data-src='"/pagesA/Preparation_plan/Class_situation?id="+item.id+"&index="+(index+1)+"&experienceClass=1"'
        style="background-color: #FFFFFF;height: 100upx;line-height: 100upx;display: flex;justify-content: space-between;padding: 0 30upx;border-bottom: 1upx solid #F7F7F7;">
        <view style="display: flex;">
          <view style="font-size: 40rpx;font-weight: 600;">{{index + 1}}</view>
          <view style="margin-left: 60upx;">
            {{item.name}}
          </view>
        </view>
        <view>
          <image style="width: 40upx;height: 40upx;margin-top: 30upx;" src="../../static/user/right.png" mode=""></image>
        </view>
      </view>
    </template>
    <view class="no_data" v-else>
      <image src="../../static/11.png" lazy-load />
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        index: 0,
        array: [{
          name: '私教体验课',
          id: 11,
          planId: '',
        }],
        datas: [],
      };
    },
    onLoad(e) {
      console.log('查看当前id', e.id);
      this.planId = e.id;
    },
    onShow() {
      uni.setStorageSync("names", '');
      uni.setStorageSync("numsDetail", '');
      uni.setStorageSync("hotTraining", '');
      uni.setStorageSync("formalTraining", '');
      uni.setStorageSync("relaxTraining", '');
      this.getDataList(this.planId);
    },
    methods: {
      async getDataList(memberId) {
        let res = await this.$myRuquest({
          url: "/coach/training/getTrainingPlanCourseList",
          data: {
            memberId,
            planId: '',
            experience: 1,
          }
        })
        this.datas = res.data.datas.trainingPlanCourseList;
      },
      goBack() {
        uni.navigateBack({
          delta: 1
        });
      },
      bindPickerChange: function(e) {
        console.log('picker发送选择改变，携带值为：' + e.detail.value)
        this.index = e.detail.value
        uni.navigateTo({
          url: `/pagesA/Preparation_plan/Edit_course?course=${this.index}&experienceClass=1`,
        });
      },
      jump(e) {
        if (e.currentTarget.dataset.src == 'Not-yet-open') {
          uni.showModal({
            title: '提示',
            content: '功能即将开放',
            showCancel: false,
            confirmColor: "#DD524D",
            success() {
              return
            }
          })
        } else {
          uni.navigateTo({
            url: e.currentTarget.dataset.src
          });
        }
      },
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #fff !important;
  }

  .headBack {
    width: 100%;
    height: 33vh;
    position: relative;

    >image {
      width: 100%;
      height: 100%;
      background-size: cover;
    }

    .title {
      position: absolute;
      display: flex;
      left: 30rpx;
      top: 60rpx;
      color: #FFFFFF;
      font-size: 36rpx;

      >image {
        width: 48rpx;
        height: 48rpx;
        margin-right: 40rpx;
      }
    }
  }

  .add_trial_list {
    width: 100%;
    height: 100rpx;
    padding: 20rpx 0 20rpx 30rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #ccc;
    position: relative;

    >image {
      width: 46rpx;
      height: 46rpx;
      margin-right: 10rpx;
    }

    .pickers {
      position: absolute;
      width: 100%;
      height: 100rpx;
      left: 0;
      top: 0;
    }
  }

  .no_data {
    width: 100%;

    >image {
      width: 100%;
      margin-top: 170rpx;
    }
  }
</style>
